<template>
  <div class="meeting_list">
    <div class="meeting_title">
      <em class="iconfont icon-zuojiantou" @click="backLastPage"/>
      <div class="meeting_h2">
        <h2>{{showMeetingDetail ? '会议详情' : '会议管理'}}</h2>
      </div>
    </div>

    <div class="meeting_content">
      <template v-if="!showMeetingDetail">
        <div class="meeting_choose">
          <span :class="chooseType ? 'choose_title' : ''" @click="openMyMeeting">我<span>创建的会</span>议</span>
          <span :class="chooseType ? '' : 'choose_title'" @click="openOtherMeeting">我<span>参加的会</span>议</span>
        </div>

        <!-- 我创建的会议 -->
        <div v-if="chooseType" class="meeting_table_list">
          <template v-for="meeting in createCurrentMeetingList">
            <div class="meeting_table" @click="openMeetingDetail(meeting.id)">
              <table>
                <caption hidden>会议信息</caption>
                <tr>
                  <th colspan="2" scope="col">{{ meeting.meetingTitle }}</th>
                </tr>
                <tr>
                  <td><img src="@/assets/static/image/dz/content_icon.png" alt="会议内容">会议内容：</td>
                  <td >{{ meeting.meetingContent }}</td>
                </tr>
                <tr>
                  <td><img src="@/assets/static/image/dz/time_icon.png" alt="会议时间">会议时间：</td>
                  <td>{{ meeting.meetingDate | getMeetingDate(meeting.meetingEndDate) }}</td>
                </tr>
                <tr>
                  <td><img src="@/assets/static/image/dz/addr_icon.png" alt="会议地点">会议地点：</td>
                  <td>{{ meeting.meetingAddress }}</td>
                </tr>
                <tr>
                  <td><img src="@/assets/static/image/dz/mem_icon.png" alt="参会人数">参会人数：</td>
                  <td>{{ meeting.importCount }}</td>
                </tr>
                <tr>
                  <td><img src="@/assets/static/image/dz/sign_icon.png" alt="签到人数">签到人数：</td>
                  <td>{{ meeting.signCount }}</td>
                </tr>
                <tr class="last_tr">
                  <td colspan="2">
                    <div class="meeting_btn">
                      <div class="btn_group">
                        <button @click="openReminders(meeting.id)">催办</button>
                        <button @click="deleteMeeting(meeting.id)">删除</button>
                      </div>
                      <div>
                        <button @click="openQrCode(meeting.id)">参会二维码</button>
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </template>
          <template v-for="meeting in createOtherMeetingList">
            <div class="meeting_table"
                 style="border: 1px solid #f5f5f5; box-shadow: rgba(117, 109, 109, 0.2) 2px 2px 2px 1px;"
                 @click="openMeetingDetail(meeting.id)">
              <table>
                <caption hidden>会议信息</caption>
                <tr>
                  <th colspan="11" scope="col">{{ meeting.meetingTitle }}</th>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/content_icon.png" alt="会议内容">会议内容：</td>
                  <td colspan="7">{{ meeting.meetingContent }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/time_icon.png" alt="会议时间">会议时间：</td>
                  <td colspan="7">{{ meeting.meetingDate | getMeetingDate(meeting.meetingEndDate) }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/addr_icon.png" alt="会议地点">会议地点：</td>
                  <td colspan="7">{{ meeting.meetingAddress }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/mem_icon.png" alt="参会人数">参会人数：</td>
                  <td colspan="7">{{ meeting.importCount }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/sign_icon.png" alt="签到人数">签到人数：</td>
                  <td colspan="7">{{ meeting.signCount }}</td>
                </tr>
                <tr class="last_tr">
                  <td colspan="11" style="background: #f5f5f5;">
                    <div class="meeting_btn">
                      <div class="btn_group">
                        <button @click="openReminders(meeting.id)">催办</button>
                        <button @click="deleteMeeting(meeting.id)">删除</button>
                      </div>
                      <div>
                        <button @click="openQrCode(meeting.id)">参会二维码</button>
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </template>
          </div>

        <!-- 参加的会议 -->
        <div v-if="!chooseType" class="meeting_table_list">
          <template v-for="meeting in joinCurrentMeetingList">
            <div class="meeting_table" >
              <table>
                <caption hidden>会议信息</caption>
                <tr>
                  <th colspan="11" scope="col">{{ meeting.meetingTitle }}</th>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/content_icon.png" alt="会议内容">会议内容：</td>
                  <td colspan="7">{{ meeting.meetingContent }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/time_icon.png" alt="会议时间">会议时间：</td>
                  <td colspan="7">{{ meeting.meetingDate | getMeetingDate(meeting.meetingEndDate) }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/addr_icon.png" alt="会议地点">会议地点：</td>
                  <td colspan="7">{{ meeting.meetingAddress }}</td>
                </tr>
              </table>
            </div>
          </template>
          <template v-for="meeting in joinOtherMeetingList">
            <div class="meeting_table" style="border: 1px solid #f5f5f5; box-shadow: rgba(117, 109, 109, 0.2) 2px 2px 2px 1px;" >
              <table>
                <caption hidden>会议信息</caption>
                <tr>
                  <th colspan="11" scope="col">{{ meeting.meetingTitle }}</th>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/content_icon.png" alt="会议内容">会议内容：</td>
                  <td colspan="7">{{ meeting.meetingContent }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/time_icon.png" alt="会议时间">会议时间：</td>
                  <td colspan="7">{{ meeting.meetingDate | getMeetingDate(meeting.meetingEndDate) }}</td>
                </tr>
                <tr>
                  <td colspan="4"><img src="@/assets/static/image/dz/addr_icon.png" alt="会议地点">会议地点：</td>
                  <td colspan="7">{{ meeting.meetingAddress }}</td>
                </tr>
              </table>
            </div>
          </template>

        </div>
      </template>

      <template v-if="showMeetingDetail">
        <div class="meeting_detail">
          <div class="meeting_message">
            <div class="message_title">会议信息</div>
            <van-cell title="会议名称：">{{ meetingDetail.meetingTitle }}</van-cell>
            <van-cell title="会议内容：">{{ meetingDetail.meetingContent }}</van-cell>
            <van-cell title="会议时间：">{{ meetingDetail.meetingDate | getMeetingDate(meetingDetail.meetingEndDate) }}</van-cell>
            <van-cell title="会议地点：">{{ meetingDetail.meetingAddress }}</van-cell>
            <van-cell title="参会人数：">{{ meetingDetail.importCount }}</van-cell>
            <van-cell title="签到人数：">{{ meetingDetail.signCount }}</van-cell>
          </div>
          <div class="meeting_person">
            <div class="person_title">参会人员</div>
            <div class="person_list">
              <span style="color: #ec7161">未签到：</span>
              <br/>
              <div style="padding: 5px; background-color: #fbe8e5;">
                <div class="signInList"  v-for="item in unSignInUserNames" :key="item.id" v-show="unSignInUserNames.length > 0">
                  <div class="personalInformation">{{ item.signInUserName }}</div>
                  <button @click="deletePersonnel(item)">删除</button>
                </div>
                <div v-show="!unSignInUserNames.length > 0">无</div>
              </div>
              <br/>
              <span style="color: #6a9ce6">已签到：</span>
              <br/>
              <div style="padding: 5px; background-color: #e7effb;">
                <div class="signInList"  v-for="item in signInUserNames" :key="item.id" v-show="signInUserNames.length > 0">
                  <div class="personalInformation">{{ item.signInUserName }}</div>
                  <button @click="deletePersonnel(item)">删除</button>
                </div>
                <div v-show="!signInUserNames.length > 0">无</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <van-overlay class="reminders" v-show="showReminders">
      <div class="reminders_overlay">
        <div class="reminders_background">
          <img src="@/assets/static/image/dz/reminders_background.jpg" alt="催办" />
        </div>

        <div class="reminders_content">
          <h2>催办</h2>
          <div style="display: flex; flex-direction: column;">
            <div class="menuArea"><span>催办人员</span><div class="allChoose" @click="changeAllSignUser()">全选/反选</div></div>
            <!--<textarea style="resize:none; margin-top: 10px;height: 80px;border: 1px solid #ccc;" :value="notSignUserStr" readonly="readonly" @click="openNotSignUserSelect()" />-->
            <div class="chooseCheckBox">
              <van-checkbox-group v-model="checkSignUserList" direction="horizontal">
                <van-checkbox v-for="item in notSignUserList" checked-color="#f14921" :name="item.mobile" :key="item.mobile">
                  {{ item.signInUserName }}
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </div>
          <div style="padding-top: 15px">
            <span>催办方式</span>
            <van-checkbox-group class="checkReminderType" v-model="remindersResult" direction="horizontal">
              <van-checkbox checked-color="#f14921" name="sms">&nbsp;短信</van-checkbox>
              <van-checkbox checked-color="#f14921" name="flashSms">&nbsp;闪信</van-checkbox>
              <van-checkbox checked-color="#f14921" name="callPhone">&nbsp;电话外呼</van-checkbox>
            </van-checkbox-group>
          </div>

          <div class="reminders_btn">
            <button @click="confirmReminders()">催办</button>
            <button @click="closeReminders()">取消</button>
          </div>
          <div class="reminders_shutDown" >
            <img @click="closeReminders()" src="@/assets/static/image/dz/close_icon.png" width="25px" height="25px" alt="关闭" />
          </div>
        </div>

      </div>
    </van-overlay>

    <van-overlay class="meeting_qrcode" v-show="showQrCode">
      <div class="qrcode">
        <div class="qrcode_title">
          <span>{{ meetingQrcode.meetingTitle }}</span>
        </div>
        <div class="circle_icon">
          <div class="circle_left"></div>
          <div class="circle_right"></div>
        </div>
        <div class="qrcode_img">
          <img :src="'data:image/png;base64,' + meetingQrcode.meetingQrCode" alt="二维码" width="95%" height="95%">
        </div>
        <div @click="closeQrCode" style="display: flex; justify-content: center;padding-top: 15px">
          <img src="@/assets/static/image/dz/close_icon.png" width="30px" height="30px" alt="">
        </div>
      </div>
    </van-overlay>

    <van-overlay class="chooseNotSignUser" v-show="showNotSignUser" :lock-scroll="false">
      <div class="chooseNotSignUserDiv">
        <h2>催办人员</h2>
        <div class="allChoose" @click="changeAllSignUser()">全选/反选</div>
        <div class="chooseCheckBox">
          <van-checkbox-group v-model="checkSignUserList" direction="horizontal">
            <van-checkbox v-for="item in notSignUserList" checked-color="#f14921" :name="item.mobile" :key="item.mobile">
              {{ item.signInUserName }}
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="checkNotSignUserBtn">
          <button @click="confirmNotSignUser()">确认</button>
          <button @click="closeNotSignUser()">取消</button>
        </div>
      </div>
    </van-overlay>

  </div>
</template>

<script>
import API from '@/api/api-chat-list.js'
import dayjs from "dayjs";

export default {
  name: "MeetingList",
  data() {
    return {
      chooseType: true,
      // 催办多选框内容
      remindersResult: [],
      // 催办弹窗显示
      showReminders: false,
      // 会议详情显示
      showMeetingDetail: false,
      // 二维码显示
      showQrCode: false,
      // 创建的会议信息列表(日期为当天)
      createCurrentMeetingList: [],
      // 创建的会议信息列表(日期不等于当天)
      createOtherMeetingList: [],
      // 参加的会议信息列表(日期为当天)
      joinCurrentMeetingList: [],
      // 参加的会议信息列表(日期不等于当天)
      joinOtherMeetingList: [],
      // 会议详情
      meetingDetail: {},
      signInUserNames: [],// 签到人员名单
      unSignInUserNames: [],// 未签到人员名单
      // 会议二维码
      meetingQrcode: {
        meetingTitle: null,
        meetingQrCode: null
      },
      // 催办会议id
      meetingRemindersId: null,
      notSignUserStr: null, // 催办人员名单
      notSignUser: [], // 催办人员名单列表
      showNotSignUser: false, // 催办人员选择弹框
      notSignUserList: [], // 未签到人员名单
      checkSignUserList: [], // 选中的人员名单
      meetingId: null, //当前会议id
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      Promise.all([
        this.queryMeetingByCreateId(), // 查询创建的会议
        this.queryJoinMeetingByOaId()]); // 查询参加的会议
    },
    /**
     * 查询创建的会议
     * @returns {Promise<void>}
     */
    async queryMeetingByCreateId() {
      this.createCurrentMeetingList = [];
      this.createOtherMeetingList = [];
      const param = {
        'creatorId': this.$store.state.userInfo.userID
      };
      const res = await API.queryMeetingByCreateId(param);
      const createMeetingList = res.data;
      createMeetingList.forEach(meeting => {
        if (dayjs(meeting.meetingDate).format('yyyy-MM-dd') === dayjs().format('yyyy-MM-dd')) {
          this.createCurrentMeetingList.push(meeting);
        } else {
          this.createOtherMeetingList.push(meeting);
        }
      })
    },
    /**
     * 查询参加的会议
     * @returns {Promise<void>}
     */
    async queryJoinMeetingByOaId() {
      this.joinCurrentMeetingList = [];
      this.joinOtherMeetingList = [];
      const param = {
        'signInUserId': this.$store.state.userInfo.userID
      };
      const res = await API.queryJoinMeetingByOaId(param);
      const joinMeetingList = res.data;
      joinMeetingList.forEach(meeting => {
        if (dayjs(meeting.meetingDate).format('yyyy-MM-dd') === dayjs().format('yyyy-MM-dd')) {
          this.joinCurrentMeetingList.push(meeting);
        } else {
          this.joinOtherMeetingList.push(meeting);
        }
      })
    },
    /**
     * 打开我的会议
     */
    async openMyMeeting() {
      await this.queryMeetingByCreateId()
      this.chooseType = true;
    },
    /**
     * 打开参加的会议
     */
    async openOtherMeeting() {
      await this.queryJoinMeetingByOaId();
      this.chooseType = false;
    },
    /**
     * 打开会议详情，获取会议信息
     * @param id 会议id
     */
    async openMeetingDetail(id) {
      this.meetingId = id;//当前会议id
      await Promise.all([
        this.queryMeetingContent(id), // 根据会议id获取会议详细信息
        this.querySignInUserByMeetingId(id)]); // 据会议id获取签到人员列表和未签到人员列表信息
    },
    /**
     * 根据会议id获取会议详细信息
     * @param id 会议id
     * @returns {Promise<void>}
     */
    async queryMeetingContent(id) {
      this.showMeetingDetail = true;
      const meetingContentParam = {
        'id': id
      }
      const res = await API.queryMeetingContent(meetingContentParam);
      this.meetingDetail = res.data;
    },
    /**
     * 根据会议id获取签到人员列表和未签到人员列表信息
     * @param id 会议id
     * @returns {Promise<void>}
     */
    async querySignInUserByMeetingId(id) {
        const param = {
            meetingId: id,
        };
        const { data } = await API.querySignInUserByMeetingId(param);
        const { attendance, notCheckingIn } = data.reduce(
            (accumulator, item) => {
                accumulator[item.signInDate ? "attendance" : "notCheckingIn"].push(item);
                return accumulator;
            },
            { attendance: [], notCheckingIn: [] }
        );
        this.signInUserNames = attendance; // 签到人员列表
        this.unSignInUserNames = notCheckingIn; // 未签到人员列表
    },
      /**
     * 打开催办弹窗
     */
    async openReminders(id) {
      event.cancelBubble = true;
      // 存入催办的会议id
      this.meetingRemindersId = id;
      const param = {
        'meetingId': id
      }
      const res = await API.querySignInUserBySignInDate(param);
      this.notSignUserList = res.data;

      // 初始化未催办人员信息框数据
      this.notSignUser = [];
      this.checkSignUserList = [];
      this.notSignUserStr = null;

      this.showReminders = true;
    },
    /**
     * 确认催办
     */
    confirmReminders() {
      // 催办人员是否为空
      const userIsEmpty = this.checkSignUserList.length === 0;
      if (userIsEmpty || this.remindersResult.length === 0) {
        const msg = userIsEmpty ? '人员' : '方式'
        this.$dialog.alert({
          message: '请选择催办' + msg + '！',
          theme: 'round-button',
        });
        return;
      }
      const param = {
        'urgingtype': this.remindersResult.join(';'),
        'meetingid': this.meetingRemindersId,
        'mobile': this.checkSignUserList.join(';')
      }
      API.urgeHandle(param);
      this.remindersResult = [];
      this.showReminders = false;
    },
    /**
     * 关闭催办弹窗
     */
    closeReminders() {
      this.remindersResult = [];
      this.showReminders = false;
    },
    /**
     * 删除会议信息
     * @param meetingId 会议id
     */
    async deleteMeeting(meetingId) {
      event.cancelBubble = true;
      const dialog = await this.$dialog.confirm({
        title: '',
        message: '确认删除该条会议',
        confirmButtonColor: 'red',
        theme: 'round-button',
      });
      if (dialog) {
        const param = {
          'id': meetingId,
          'status': true
        }
        await API.editMeetingStatus(param);

        this.initData();
      }


    },
    /**
     * 打开二维码窗口，获取二维码
     */
    async openQrCode(id) {
      event.cancelBubble = true;
      const param = {
        'id': id
      }
      const res = await API.queryMeetingCode(param);
      this.meetingQrcode = res.data;

      this.showQrCode = true;
    },
    /**
     * 关闭二维码窗口
     */
    closeQrCode() {
      this.showQrCode = false;
    },
    /**
     * 返回上一页
     */
    backLastPage() {
      if (this.showMeetingDetail) {
        this.showMeetingDetail = false
      } else {
        this.$router.back();
      }
    },
    /**
     * 打开催办人员选择框
     */
    openNotSignUserSelect() {
      this.showNotSignUser = true;
    },
    /**
     * 确认选择的催办人员
     */
    confirmNotSignUser() {
      this.notSignUser = this.notSignUserList.filter(item => this.checkSignUserList.includes(item.mobile));
      this.notSignUserStr = this.notSignUser.map(item => item.signInUserName).join(",");
      this.showNotSignUser = false;
    },
    /**
     * 关闭催办人员选择框
     */
    closeNotSignUser() {
      this.checkSignUserList = this.notSignUser.map(item => item.mobile);
      this.showNotSignUser = false;
    },
    /**
     * 催办人员选择，全选反选
     */
    changeAllSignUser() {
      this.checkSignUserList = this.checkSignUserList.length < this.notSignUserList.length
        ? this.notSignUserList.map(item => item.mobile) : [];
    },
    /**
     * 删除签到人员
     * @param item
     */
    async deletePersonnel({id, meetingId}) {
      const trueDeletion = await this.$dialog.confirm({
        message: '是否确认删除参会人员？',
      })
      if( trueDeletion === "confirm" ){
        await API.deleteTheCheckInPerson({id, meetingid: meetingId});
        this.openMeetingDetail( this.meetingId );
      }
    },
  },
  filters: {
    /**
     * 将会议的开始时间和结束时间拼接显示
     * @param meetingDate 开始时间
     * @param meetingEndDate 结束时间
     * @returns {string}
     */
    getMeetingDate(meetingDate, meetingEndDate) {
      const startDate = dayjs(meetingDate).format('YYYY-MM-DD HH:mm');

      if (!meetingEndDate) {
        // 结束时间为空，则只返回开始时间；YYYY/MM/DD HH:mm
        return startDate;
      } else if (dayjs(meetingDate).isSame(dayjs(meetingEndDate,),'day')) {
        // 结束时间和开始时间是同一天，则结束时间只显示时分；YYYY/MM/DD HH:mm - HH:mm
        return startDate + dayjs(meetingEndDate).format(' - HH:mm');
      }
      // 结束时间和开始时间不是同一天，则结束时间显示完整时间；YYYY/MM/DD HH:mm - YYYY/MM/DD HH:mm
      return startDate + dayjs(meetingEndDate).format(' - YYYY-MM-DD HH:mm');
    }
  }
}
</script>

<style scoped lang="less">
.meeting_list {
  height: 100vh;
  font-size: 15px;
  font-family: sans-serif;
  color: #333;
  .meeting_title {
    background-color: #F33622;
    height: 2em;
    padding-top: 1em;
    color: white;
    font-size: 1.3em;
    background-repeat: no-repeat;
    background-size: 80% auto;
    .iconfont {
      position: absolute;
      top: 21px;
      left: 0.9em;
    }
    .meeting_h2 {
      display: flex;
      justify-content: space-evenly;
    }
  }
  .meeting_content {
    .meeting_choose {
      display: flex;
      justify-content: space-around;
      height: 45px;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      margin: 10px 15px;
      .choose_title {
        color: #f4363f;
        font-size: 18px;
        font-weight: 800;
        span {
          text-decoration: underline #f4363f 3px;
          text-underline-offset: 10px;
        }
      }
    }
    .meeting_table_list {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: 680px;
      .meeting_table:last-of-type {
        margin-bottom: 100px;
      }
      .meeting_table {
        border: 1px solid #fbae7f;
        border-radius: 5px;
        margin: 0 15px 20px 15px;
        table {
          margin-top: 1px !important;
          table-layout:fixed;
          min-width: 300px;
        }
        tr {
          display: flex;
          th {
            flex: 1;
            font-size: 16px;
            padding: 10px;
            background-color: #f5f5f5;
            font-weight: normal;
            text-align: left;
            border-radius: 5px;
          }
          td {
            display: flex;
            align-items: center;
            padding: 5px 0;
            line-height: 25px;
            img {
              width: 22px;
              height: 22px;
              margin: 0 4px;
            }
            &:nth-child(1){
              display: flex;
              align-items: center;
              color: grey;
              width: 111px;
            }
            &:nth-child(2){
              flex: 1;
            }
          }
        }
        .last_tr {
          td {
            flex: 1;
            background: linear-gradient(to right, #d61f1b, #fe6f59);
            .meeting_btn {
              width: 100%;
              display: flex;
              justify-content: space-between;
              button {
                margin: 10px;
                border-radius: 10px;
                border: none;
                background-color: white;
                padding: 3px 10px;
                color: black;
              }
            }
          }
        }
      }
    }
    .meeting_detail {
      padding: 0 10px 10px 10px;
      background-color: #f5f5f5;
      overflow-y: auto;
      height: 725px;
      -webkit-overflow-scrolling: touch;
      .meeting_message {
        background-color: white;
        border-radius: 5px;
        padding-bottom: 10px;
        margin: 20px 0;
        .van-cell {
          margin: 10px 0;
          &:after {
            border-bottom: 1px solid #bbb9b9;
          }
        }
        .van-cell__title {
          color: #bbb9b9;
        }
        .van-cell__value {
          min-width: 70%;
          text-align: left;
          color: black;
        }
        .message_title {
          background-image: url("../../../assets/static/image/dz/title_background.png");
          background-repeat: no-repeat;
          color: white;
          text-align: center;
          width: 120px;
          height: 30px;
          margin: auto;
          font-size: 17px;
          padding-top: 5px;
        }
      }
      .meeting_person {
        background-color: white;
        border-radius: 5px;
        margin: 20px 0;
        padding: 0 10px 20px 10px;
        .person_list {
          display: flex;
          flex-direction: column;
          span {
            line-height: 20px;
          }
            .signInList {
              display: flex;
              justify-content: space-between;
              padding: 5px;
              align-items: center;
                button {
                  border: none;
                  background: #ededed;
                  border-radius: 5px;
                  padding: 5px 10px;
                }
            }
        }
        .person_title {
          background-image: url("../../../assets/static/image/dz/title_background.png");
          background-repeat: no-repeat;
          color: white;
          text-align: center;
          width: 120px;
          height: 30px;
          margin: auto;
          font-size: 17px;
          padding-top: 5px;
        }
      }
    }
  }
  .reminders {
    background-color: rgba(42, 47, 49, 0.5);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
    .reminders_overlay {
      width: 80%;
      height: 450px;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .reminders_background {
        text-align: center;
        img {
          object-fit: contain;
          width: 70%;
        }
      }
      .reminders_content {
        width: 80%;
        .chooseCheckBox {
          overflow-y: auto;
          height: 74px;
          margin-top: 10px;
          border: 1px solid #ccc;
        }
        .menuArea {
          display: flex;
          justify-content: space-between;
            .allChoose {
              color: red;
            }
        }
        h2 {
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .checkReminderType {
          display: flex;
          justify-content: space-evenly;
        }
        .van-checkbox {
          margin: 15px 0;
        }
        .reminders_btn {
          display: flex;
          justify-content: space-between;
          padding-top: 10px;
          button {
            border: none;
            border-radius: 5px;
            padding: 7px 25px;
            &:first-of-type {
              color: white;
              background-color: #f1481f;
            }
          }
        }
        .reminders_shutDown {
          text-align: center;
          position: relative;
          bottom:-40px;
        }

        /deep/.van-checkbox__label {
          margin-left: 0;
        }
      }
    }
  }
  /** 会议二维码 */
  .meeting_qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    .qrcode {
      width: 80vw;
      padding: 40px 25px 20px 25px;
      border-radius: 5px;
      background: linear-gradient(to bottom, #d61f1b, #f4cfa2);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .qrcode_title {
        width: 77vw;
        border-radius: 10px 10px 0 0;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        font-size: 16px;
        font-weight: bold;
      }
      .circle_icon {
        width: 77vw;
        display: flex;
        justify-content: space-between;
        position: relative;
        top: -10px;
        height: 1px;
        .circle_left {
          width: 10px;
          height: 20px;
          border-radius: 0 10px 10px 0;
          line-height: 100px;
          background: #dd4639;
        }
        .circle_right {
          width: 10px;
          height: 20px;
          border-radius: 10px 0 0 10px;
          line-height: 100px;
          background: #dd4639;
        }
      }
      .qrcode_img {
        width: 77vw;
        padding: 5px;
        background: white;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
      }
    }

  }

  .chooseNotSignUser {
    background-color: rgba(42, 47, 49, 0.5);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
    .chooseNotSignUserDiv {
      background: #FFFFFF;
      padding: 15px;
      width: 68%;
      max-height: 80%;

      h2 {
        text-align: center;
      }

      .allChoose {
        color: red;
        margin: 10px 0;
        padding: 5px;
      }

      .chooseCheckBox {
        max-height: 400px;
        overflow-y: scroll;

        .van-checkbox--horizontal {
          margin-bottom: 10px;
        }
      }

      .checkNotSignUserBtn {
        display: flex;
        justify-content: space-evenly;
        padding-top: 10px;
        button {
          border: none;
          border-radius: 5px;
          padding: 7px 25px;
          &:first-of-type {
            color: white;
            background-color: #f1481f;
          }
        }
      }
    }
  }

}
</style>
